<template>
  <div>
    <div class="navMarginTop allBackground" :style="{ height: screenHeightBg }">
      <div class="DistrCotBox">
        <div class="DistrCot">
          <div class="h6">分销设置</div>
          <a-spin :spinning="confirmLoading">
            <j-form-container>
              <a-form-model ref="form" :model="model" slot="detail" :rules="validatorRules">
                <a-row>
                  <a-col :span="24">
                    <a-form-model-item label="分销功能" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enable">
                      <a-switch
                        :checked="model.enable == 1"
                        @change="handleChangeValidateStatus"
                        checked-children="是"
                        un-checked-children="否"
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- <a-col :span="24">
                    <a-form-model-item label="分销条件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
                      <a-radio-group name="tenantStatus" v-model="model.status">
                        <a-radio :value="1"><div class="isSelect">无条件</div></a-radio>
                        <a-radio :value="0"><div class="isSelect">申请分销</div></a-radio>
                      </a-radio-group>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="分销层级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
                      <a-radio-group name="tenantStatus" v-model="model.status">
                        <a-radio :value="1"><div class="isSelect">一级分销</div></a-radio>
                        <a-radio :value="0"><div class="isSelect">二级分销</div></a-radio>
                      </a-radio-group>
                    </a-form-model-item>
                  </a-col> -->
                  <a-col :span="24">
                    <a-form-model-item label="一级分佣" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="oneLevel">
                      <a-input v-model="model.oneLevel" placeholder="请输入一级分佣比列"></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="二级分佣" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="twoLevel">
                      <a-input v-model="model.twoLevel" placeholder="请输入二级分佣比列"></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24" style="text-align: center">
                    <a-button @click="submitForm" type="primary">提 交</a-button>
                  </a-col>
                </a-row>
              </a-form-model>
            </j-form-container>
          </a-spin>
        </div>
      </div>
    </div>
    <global-footer />
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import GlobalFooter from '@/components/page/GlobalFooter'
export default {
  name: 'DistributionSettings',
  components: {
    GlobalFooter,
  },
  props: {},
  data() {
    return {
      model: { enable: 1, },
      screenWidth: '',
      screenHeight: '',
      screenHeightBg: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        // id: [{ required: true, message: '请输入提现金额!' }],
      },
      url: {
        add: '/sys/tenant/add',
        edit: '/sys/tenant/edit',
        queryById: '/sys/tenant/queryById',
        list: '/sys/tenant/list',
        delete: '/sys/tenant/delete',
        deleteBatch: '/sys/tenant/deleteBatch',
      },
    }
  },
  created() {},
  computed: {},

  mounted() {
    this.$nextTick(function () {
      this.screenWidth = window.innerWidth
      this.screenHeight = window.innerHeight
      this.screenHeightBg = this.screenHeight - 120 + 'px'
    })
    this.getDistributionSet()
  },
  methods: {
    // 是否开启校验 开关改变事件
    handleChangeValidateStatus(checked) {
      console.log('checked', checked)
      this.model.enable = checked == true ? 1 : 0
    },
    // 校验手机号
    validateMobile(rule, value, callback) {
      if (!value || new RegExp(/^[0-9]* $/).test(value)) {
        callback()
      } else {
        callback('您的金额格式不正确!')
      }
    },
    submitForm() {
      const that = this
      // 触发表单验证
      that.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          
          that.$http
            .post('/distributionset/api/edit', this.model)
            .then((res) => {
              console.log('res', res)
            })
            .catch((error) => {
              console.log('error', error)
            })
            .finally(() => {
              that.confirmLoading = false
            })
        } else {
          return false
        }
      })
    },

    getDistributionSet() {
      getAction('/distributionset/api/getDistributionSet')
        .then((res) => {
          console.log('res', res)
          this.model = res.result
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
  },
}
</script>

<style lang="less" scoped>
.DistrCotBox {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  .DistrCot {
    margin-bottom: 30px;
    float: left;
    width: 100%;
    .h6 {
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 25px;
      color: black;
    }
  }
  /deep/.ant-radio-wrapper {
    border: 1px solid #e5e5e5;
    padding: 9px 5px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    float: left;
    .ant-radio {
      display: none;
    }
    img {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
    &.ant-radio-wrapper-checked {
      border: 1px solid #00abff;
    }
  }
}

@media screen and (max-width: 767px) {
}
</style>